import * as React from 'react'
import { useEffect,useState } from 'react';
import { useAppDispatch, useAppSelector } from '../../hooks';
import {
    Row,
    Col,
    Button,
    Input,
} from 'antd';
import TableGood from './components/TableGood'
import SelectCateGood from './components/SelectCateGood';
import { getGoodList, getCatesList, clearGoodCache } from '@/store/actions';
import { Good } from '@/types';

export default props => {
    const dispatch=useAppDispatch()
    const [name,setName]=useState('')
    const [page,setPage]=useState(1)
    const [cate,setCate]=useState('')
    const list: Array<Good> = useAppSelector(store=>store.good.list)
    const cates: Array<any> = useAppSelector(store=>store.good.cates)
    
    const total:number = useAppSelector(store=>store.good.total)
    useEffect(()=>{
        dispatch(clearGoodCache())
        return undefined
    },[])
    useEffect(()=>{
        dispatch(getGoodList({name,page,size:2,cate}))
        return undefined
    },[name,page,cate])
    useEffect(() => {
        dispatch(getCatesList())
        return undefined
    }, [])
    

    return (
        <div className='qf-userlist'>
            <div className='qf-filter'>
                <Row align='middle'>
                    <Col span={2}>
                        <span>搜索</span>
                    </Col>
                    <Col span={4}>
                        <Input 
                            placeholder="名称搜索"
                            value={name}
                            onChange={e=>(setName(e.target.value))}
                         />
                    </Col>
                    <Col span={2} offset={1}>
                        <span>品类</span>
                    </Col>
                    <Col span={4}>
                        <SelectCateGood onChange={e=>setCate(e)} cate={cates}/>                            
                    </Col>
                    <Col span={2}>
                        <Button 
                            size='small' 
                            onClick={() => props.history.push('/good/add')}
                            type="primary"
                        >添加
                        </Button>
                    </Col>
                </Row>
            </div>
            <TableGood
                total={total}
                data={list}
                rows={[]}
                cate={cates}
                onChange={p=>setPage(p)}
            />
        </div>
    )
}